<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SUB MENU LIST</title>
	
		<!--[[  Hybrid 베이스-->
	<script type="text/javascript" src="../../js/hybrid/hybrid.class.js"></script>
	<script type="text/javascript" src="../../js/hybrid/hybrid.common.js"></script>
	<!-- ]] -->

	<script type="application/javascript" src="../../js/ext_js/iscroll-lite.js?v4"></script>
	<link rel="stylesheet"  href="../../css/iscroll.css" />
	

	<!--[[  JQuery Mobile -->
	<link rel="stylesheet"  href="../../js/jqm/jquery.mobile-1.0rc3.min.css" />
	<script src="../../js/jqm/jquery.js"></script>
	<script src="../../js/jqm/jquery.mobile-1.0rc3.min.js"></script>
	<!-- ]] -->
	<script src="../../js/common/index.js"></script>

</head> 
<body> 
<div data-role="page" class="type-index" id="inputPage">

	<div data-role="header" data-theme="a">
		<h1>Form 입력 샘플</h1>
		<a href="#" data-rel="back" data-icon="back"  data-direction="reverse" class="ui-btn-left jqm-back">BACK</a>
	</div><!-- /header -->

	<div data-role="content">	
	
			<form action="response.html" method="get" id="sampleForm">
				<h2>Input</h2>
				
				<div data-role="fieldcontain">
	         	<label for="name">Text Input:</label>
	         	<input type="text" name="name" id="name"  data-bindkey="/root/name" value="" placeholder="입력해주세요" />
				</div>

				<div data-role="fieldcontain">
				<label for="textarea">Textarea:</label>
				<textarea cols="40" rows="8" name="textarea" id="textarea"  data-bindkey="/root/textarea"></textarea>
				</div>

				<div data-role="fieldcontain">
					<label for="select-choice-a" class="select">Picker:</label>
					<select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-bindkey="/root/select">
						<option>Picker example</option>
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</div>
			
				<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
					<div class="ui-block-a"><button type="button" data-theme="d" id="cancel_btn">Cancel</button></div>
					<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
	    			</fieldset>
				</div>

			</form>
		
	</div><!-- /content -->
	
	<div data-role="footer" data-position="fixed">
    	 <h1>Fixed toolbars</h1>
	</div><!-- /Footer -->

<script type="text/javascript">

var nameVar;
var textareaVar;
var selectVar;
var inputMapVar;

// 문서가 처음 로딩 될때 
$(document).ready(function() {

/*
	nameVar = $('#name');
	textareaVar = $('#textarea');
	selectVar = $('#select-choice-a');
	alert('ready');
*/

	// 페이지가(div)  보여질때 (Back으로 돌아왔을때를 포함함!!!)
	
	$("#inputPage").bind("pageshow", function(event) {
		alert('pageshow');
		
		nameVar = $('#name');
		textareaVar = $('#textarea');
		selectVar = $('#select-choice-a');
		inputMapVar = $('input[name="*_r"]'); 
		
		nameVar.val('');
		textareaVar.val('');
		selectVar[0].selectedIndex=0;
		selectVar.selectmenu("refresh");
	});

});

//
// 폼 전송 버턴
//
$('#sampleForm').submit(function() {  
	
	if (selectVar[0].selectedIndex==0) {
		alert('Picker를 선택하세요');
		return false;
	} 
	
	// ****  중요 *************
	// 전역 어레이 추가
	// form 에서 data-bindkey 가 포함된 경우에 전역 어레이에 추가
	//
	
    $(":input").each(function(index) {
    	
    	if ($(this).jqmData("bindkey") != null) {
    		addPassValue($(this));
    	}
    	
 	 });
 	 
	return true;
});

//
// 취소시 폼 클리어 
//
$('#cancel_btn').live('tap',function() {  
	nameVar.val('');
	textareaVar.val('');
	selectVar[0].selectedIndex=0;
	selectVar.selectmenu("refresh");
	
	return false;
});

</script>
	
</div>
</body>
</html>